<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->

    <title>修改密码</title>
    <style>

        .change-password-ts {
            padding: 0.36rem 0.32rem 0.2rem 0.32rem;
            color: rgba(34, 34, 34, 0.6);
        }

        .change-password-wrap {
            background-color: white;
            padding: 0 0.32rem;
            color: #222222;
            margin-top: 0.16rem;
        }

        .change-password-item {
            padding: 0.36rem 0 0.34rem 0;
            border-bottom: 1px solid #F2F2F2;
        }

        .change-password-input {
            width: 4rem;
            padding-left: 0.4rem;
        }

        .change-password-input input {
            color: #222222;
            height: 0.3rem;
            line-height: 0;
        }

        .change-password-yzm {
            color: #2C68FF;
        }

        .change-password-step {
            padding: 0 0.32rem
        }

        .change-password-next {
            padding: 0.2rem 2.96rem;
            background: #4E7EF4;
            border-radius: 2px;
            /*opacity: 0.5;*/
            color: #FFFFFF;
        }

        .change-password-dot {
            height: 0.08rem;
            width: 0.08rem;
            border-radius: 1rem;
            background-color: #B3B3B3;
            margin-right: 0.18rem;
        }

    </style>
</head>
<body>

<div class="flex-column h-100-p ff400">
    <!--状态栏-->
    <div class="placeholder-top flex-column bg-white">
        <!--状态栏-->
        <div class="status-bar"></div>
        <!--标题栏-->
        <div class="nav-bar flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1">修改密码</div>
            <div class="right-bar">
            </div>
        </div>
    </div>
    <div class="flex-1 flex-column">
        <div class="change-password-wrap fs15">
            <div class="change-password-item flex-row align-items-center">
                <div>手机号</div>
                <div class="change-password-input">
                    <div class="change-password-phone fs15"></div>
                </div>
            </div>
            <div class="change-password-item flex-row align-items-center justify-content-between">
                <div class="flex-row align-items-center">
                    <div>验证码</div>
                    <div class="change-password-input">
                        <input class="change-password-code fs15" placeholder="请输入验证码"/>
                    </div>
                </div>
                <div class="change-password-yzm fs14" onclick="getPhoneCaptcha()">获取验证码</div>
            </div>
            <div class="change-password-item flex-row align-items-center">
                <div>新密码</div>
                <div class="change-password-input">
                    <input class="change-password-new fs15" type="password" placeholder="输入新的密码"/>
                </div>
            </div>
            <div class="change-password-item flex-row align-items-center">
                <div>确认密码</div>
                <div class="change-password-input">
                    <input class="change-password-old fs15" type="password" placeholder="再次输入密码"/>
                </div>
            </div>
        </div>
        <div class="change-password-ts fs13">
            <div class="flex-row align-items-center">
                <div class="change-password-dot"></div>
                <div>必须包含字母、数字和特殊字符</div>
            </div>
            <div class="flex-row align-items-center mt5">
                <div class="change-password-dot"></div>
                <div>长度必须大于等于8位</div>
            </div>
        </div>

        <div class="change-password-step mt30" onclick="retrievePwd()">
            <div class="change-password-next">保存</div>
        </div>

    </div>

</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>


<script>
  let pm = {
    newPwd: '',
    oldPwd:'',
    mobile: '',
    userId: '',
    vcode: '',
    token: '',
    waitTime: 60
  }

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()
    getAppUserInfo()
  }

  function reLoadPage() {
    getAppUserInfo()
  }

  function getAppUserInfo() {
    Server.changePassword.getAppUserInfo({}).then(data => {
      pm.mobile = data.userInfo.mobile
      pm.userId = data.userInfo.userId
      $('.change-password-phone').html(pm.mobile)
    })
  }

  // 获取验证码
  function getPhoneCaptcha() {
    $('.change-password-yzm').html(pm.waitTime + 's').removeAttr('onclick')
    if (pm.mobile) {
      Server.login.getPhoneCaptcha({
        mobile: pm.mobile
      }).then(data => {
        pm.token = data.data
      })
      // 倒计时
      let timer = setInterval(function () {
        pm.waitTime -= 1
        if (pm.waitTime > 0) {
          $('.change-password-yzm').html(pm.waitTime + 's')
        } else {
          $('.change-password-yzm').html('获取验证码').attr('onclick', 'getPhoneCaptcha()')
          pm.waitTime = 60
          clearInterval(timer)
        }
      }, 1000)
    }

  }

  // 修改密码
  function retrievePwd() {
    pm.vcode = $('.change-password-code').val()
    pm.newPwd = $('.change-password-new').val()
    pm.oldPwd = $('.change-password-old').val()
    if(!pm.vcode){
      jsBridge.callBridge('toast', {msg: '请输入验证码'})
      return
    }
    // 如果新密码和确认密码都不为空
    if(pm.newPwd && pm.oldPwd){
      let regu = /^(?!(?:[^a-zA-Z]|\D|[a-zA-Z0-9])$).{8,}$/
      let re = new RegExp(regu)
      if(pm.newPwd !== pm.oldPwd){
        jsBridge.callBridge('toast', {msg: '两次密码不一致'})
        return
      }else{
        if(!re.test(pm.newPwd)){
          jsBridge.callBridge('toast', {msg: '请输入符合要求的密码'})
          return
        }
      }
    }else{
      jsBridge.callBridge('toast', {msg: '请输入密码'})
      return
    }
    Server.changePassword.retrievePwd({
      newPwd: pm.newPwd,
      mobile: pm.mobile,
      userId: pm.userId,
      vcode: pm.vcode,
      token: pm.token
    }).then(data => {
      if(data.code === '000000'){
        jsBridge.callBridge('toast', {msg: '修改成功'})
        clickBack()
      }else{
        jsBridge.callBridge('toast', {msg: data.msg})
      }
    }).catch(_ => {
      jsBridge.callBridge('toast', {msg: '修改异常'})
    })
  }

</script>
</html>
